import { memo, useState } from 'react';
import { Tabs, Drawer } from 'antd';

import Icon from '@/component/Icon';
import Form from '@/view/home/Setting/Form';
import System from '@/view/home/Setting/System';
import Record from '@/view/home/Setting/Record';
import Styles from './index.module.less';
import { observer } from 'mobx-react-lite';

export interface SettingProps {
    visible: boolean;
    toggleSetting: (visible: boolean) => unknown;
}

export default memo<SettingProps>(
    observer((props) => {
        const [tabItems] = useState([
            {
                icon: <Icon name="icon-print" />,
                key: 'form',
                label: '打印机',
                children: <Form toggleSetting={props.toggleSetting} />
            },
            {
                icon: <Icon name="icon-xitong" />,
                key: 'system',
                label: '系统',
                children: <System toggleSetting={props.toggleSetting} />
            },
            {
                icon: <Icon name="icon-search1" />,
                key: 'record',
                label: '查询',
                children: <Record />
            }
        ]);

        return (
            <Drawer
                className={Styles.printerSetting}
                title="打印设置"
                open={props.visible}
                placement="top"
                closable={false}
                onClose={() => props.toggleSetting(false)}
            >
                <Tabs
                    defaultActiveKey="form"
                    className={Styles.tabs}
                    items={tabItems}
                />
            </Drawer>
        );
    })
);
